<template>
  <div >
    <a-row :gutter="10">
      <a-col :md="8" :lg="6" :xl="6" :xxl="5" class="scroll" >
        <a-list bordered :data-source="UserList" :loading="leftLoading" style="background: #FFFFFF;">
          <div id="title" slot="header" class="g-flex g-y-center g-x-between" style="font-weight: bold;color: #333333;">
            待安床用户列表
            <a-button size="small" type="primary" icon="reload"  @click="getList">刷新</a-button>
          </div>
          <a-list-item
            itemLayout="vertical"
            :draggable="true"
            slot="renderItem"
            slot-scope="item"
            style="padding: 10px 10px;cursor: move;"
            @dragend="dragend($event,item)"
            @dragenter="dragenter($event)"
          >
            <div class="g-flex-col" style="width: 100%;">
              <div class="g-flex g-x-between g-y-center" >
                <a-avatar  :size="40" :src="require('@/assets/man.png')" />
                <a style="cursor: move;">{{item.name}}</a>
                <span>卡号：{{item.cardNo}}</span>
              </div>
              <div style="font-size: 12px;cursor: default;" class="g-flex g-x-between g-y-center">
                <div style="margin-top: 10px;color: #999999;" class="g-no-wrap-hidden">治疗时间：{{item.treatDate }}</div>
<!--                <a-button size="small" type="primary" style="font-size: 12px;">安排床位</a-button>-->
              </div>

            </div>
          </a-list-item>

        </a-list>
      </a-col>
      <a-col :md="16" :lg="18" :xl="18" :xxl="19" class="scroll"  >
        <a-list  :grid="{ gutter:8, sm: 2,  lg: 3,xl:3,xxl:4}" :data-source="BedList" :loading="rightLoading">
          <a-list-item :class="{'enterItem':enterIndex===index}" slot="renderItem" slot-scope="item,index"  @dragenter="dragenter($event,item,index,true)"   >
            <a-card :class="{'enterItemCard':enterIndex===index}" :bodyStyle="{background:item.hospitalizedId?'#e8e8e8':'none'}">
              <a-card-meta >
                <template slot="title" >
                  <a >{{item.bedName}}</a><a-tag v-if="item.hospitalizedId" style="margin-left: 10px;display: inline;" color="#87d068">正在使用</a-tag>
                </template>
                <div slot="description"   >
                  <a-descriptions :column="1" size="small">
                    <a-descriptions-item  label="饮食状况">{{ item.dietCondition }}</a-descriptions-item>
                    <a-descriptions-item  label="护理等级">{{ item.careLevel }}</a-descriptions-item>
                    <a-descriptions-item  label="主治医生">{{ item.drName }}</a-descriptions-item>
                    <a-descriptions-item label="病情">{{ item.conditionofapatient }}</a-descriptions-item>
                  </a-descriptions>
                </div>
<!--                <a-avatar v-if="item.sex==1" slot="avatar" :size="50" :src="require('@/assets/woman.png')" />-->
<!--                <a-avatar v-else slot="avatar" :size="50" :src="require('@/assets/man.png')" />-->
                <template v-if="item.hospitalizedId" >
                  <a-avatar v-if="item.sex==1" slot="avatar" :size="50" :src="require('@/assets/woman.png')" />
                  <a-avatar v-else  slot="avatar" :size="50" :src="require('@/assets/man.png')" />
                </template>
                <a-avatar v-else  slot="avatar" :src="require('@/assets/bed.png')" :size="42"  />
              </a-card-meta>
              <!--底部操作栏-->
              <template slot="actions" class="ant-card-actions ">
                <a-button :disabled="!item.hospitalizedId" @click="clickStartOperate(item)" type="link" class="g-bt-pad-0" >出院</a-button>
                <a-button :disabled="!item.hospitalizedId" @click="$refs.treatDrawer.show(item)"  type="link" class="g-bt-pad-0" >治疗详情</a-button>
                <a-dropdown :disabled="!item.hospitalizedId">
                  <a-menu slot="overlay" >
                    <a-menu-item key="1" >
                      <a-button  @click="clickChangeRoom(item)" type="link" class="g-bt-pad-0" >住院消费汇总</a-button>
                    </a-menu-item>
                    <a-menu-item key="2" >
                      <a-button  @click="clickCancelOperate(item)" type="link" class="g-bt-pad-0" >住院消费明细</a-button>
                    </a-menu-item>
                    <a-menu-item key="3" >
                      <a-button  @click="clickChangeRoom(item)" type="link" class="g-bt-pad-0" >打印输液卡</a-button>
                    </a-menu-item>
                    <a-menu-item key="4" >
                      <a-button  @click="clickCancelOperate(item)" type="link" class="g-bt-pad-0" >打印处方</a-button>
                    </a-menu-item>
                    <a-menu-item key="5" >
                      <a-button  @click="clickChangeRoom(item)" type="link" class="g-bt-pad-0" >打印住院明细</a-button>
                    </a-menu-item>
                    <a-menu-item key="6" >
                      <a-button  @click="clickCancelOperate(item)" type="link" class="g-bt-pad-0" >腕带管理</a-button>
                    </a-menu-item>
                  </a-menu>
                  <a-button  type="link" class="g-bt-pad-0"> 更多 <a-icon type="down" /> </a-button>
                </a-dropdown>
              </template>
            </a-card>
          </a-list-item>
        </a-list>
      </a-col>
    </a-row>
    <treatDrawer ref="treatDrawer"/>
    <changeRoomModal ref="changeRoomModal" @success="getList()" />
  </div>
</template>

<script>
import treatDrawer from '@/views/workstation/nurse/detailsDrawer'
import changeRoomModal from '@/views/workstation/operation/changeRoomModal'
import { startOperate, finishOperate, cancelOperate} from '@/api/workstation/doctor'
import { nurseBedList,waitingBedUserList} from '@/api/workstation/doctor'
import moment from 'moment'
export default {
  components: {
    treatDrawer,
    changeRoomModal,

  },
  data() {
    return {
      currentTime:moment().format('YYYY-MM-DD HH:MM:SS'),
      form: this.$form.createForm(this),
      disabled: true, //是否禁用新增按钮
      UserList: [],
      BedList: [],
      leftLoading:false,
      rightLoading:false,
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 10,//每页中显示数据的条数
      },
      loading: true, //加载状态,
      target_bed:'',
      enterIndex:'',
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    /**
     * 获取列表
     * */
    getList(){
      this.leftLoading = true
      this.rightLoading = true
      waitingBedUserList().then(res => {
        this.UserList = res.rows
      }).finally(()=>{
        this.leftLoading = false
      })
      nurseBedList().then(res => {
        // console.log('床位列表',res)
       this.BedList = res.rows
      }).finally(()=>{
        this.rightLoading = false
      })

    },
    /**
     * 开始手术
     * */
    clickStartOperate(room){
      const _this = this
      this.$confirm({
        title: `确认开始手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{room.name}</p>
            <p>当前时间：{ _this.currentTime }</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid,
            operateId: room.operateId,
            startTime : _this.currentTime,
          }
          startOperate(params).then(res=>{
            console.log('开始手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_bed = ''
        },
      })
    },

    /**
     * 结束手术
     * */
    clickEndOperate(room){
      const _this = this
      this.$confirm({
        title: `确认结束手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{room.name}</p>
            <p>当前时间：{ _this.currentTime }</p>
            <p style="color:red;">完成后将会把手术材料转收费处，请提醒客户结账</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid,
            operateId : room.operateId,
            endTime : _this.currentTime,
          }
          finishOperate(params).then(res=>{
            console.log('结束手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_bed = ''
        },
      })
    },
    /**
     * 取消手术
     * */
    clickCancelOperate(room){
      const _this = this
      this.$confirm({
        title: `确认取消手术吗?`,
        content: h =>
          <div>
            <p style="marginTop:20px;">{ room.roomName }</p>
            <p>客户姓名：{ room.name }</p>
            <p>卡号：{ room.cardNo }</p>
          </div>,
        onOk() {
          const params = {
            treatId	: room.treatId,
            roomId	: room.roomid
          }
          cancelOperate(params).then(res=>{
            console.log('结束手术',res)
            if(res.code==200){
              _this.$message.success( res.message)
              _this.getList()
            }else{
              _this.$message.info(res.message)
            }
          })
        },
        onCancel() {
          _this.target_bed = ''
        },
      })
    },
    /**
     * 更换手术室
     * */
    clickChangeRoom(target_bed){
      this.$refs.changeRoomModal.show(target_bed)
    },
    /**
     * 进入拖拽区域
     * */
    dragenter(event,item='',index = undefined,isRoom=false){
      event.preventDefault()
      if(isRoom){
        this.enterIndex = index
      }else{
        this.enterIndex = ''
      }
      this.target_bed = item
    },
    /**
     * 拖拽结束
     * */
    dragend(event,user){
      event.preventDefault()
      const _this = this
      console.log('拖拽结束，床位',this.target_bed)
      this.enterIndex = ''
      const bedName = _this.target_bed.bedName
      const hospitalizedId = _this.target_bed.hospitalizedId
      if(typeof hospitalizedId == 'undefined'){
        return
      }
      if(hospitalizedId){
        _this.$error({
          title: `${bedName}正在使用中...`,
          content: '请选择其他手术室',
        })
        _this.target_bed = ''
        return
      }
      if(hospitalizedId===null){
        this.$refs.operateRegisterModal.show(user,this.target_bed)
      }

    },
  }
}
</script>

<style lang="less" scoped>
.bed-container{
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  background: red;
  width: 100%;
  height: 100%;
  z-index: 100;
}
/deep/ .ant-card-body{
  padding: 16px 12px;
}
/deep/  .ant-descriptions-small .ant-descriptions-row > td{
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/deep/  .ant-descriptions-small .ant-descriptions-row > td {
  padding-bottom: 4px;
}
/deep/ .ant-card-actions > li {
  margin: 8px 0;
}
/deep/ .ant-list-item-meta-avatar{
  margin-right: 10px;
}
.scroll{
  overflow-y: scroll;
  max-height: 71vh;
}
.scroll::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
}
.scroll::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 6px;
  background   : #aaa;
}
.scroll::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  border-radius: 8px;
  //background   : #FFFFFF;
}
///deep/ .ant-list-item{
//  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.09);
//}
.enterItem {
  transition:all 0.5s ;
  -moz-transition: all 0.5s ; /* Firefox 4 */
  -webkit-transition: all 0.5s ; /* Safari 和 Chrome */
  -o-transition: all 0.5s ; /* Opera */
  transform:scale(0.8);
}
.enterItemCard {
  box-shadow: 0px 0px 10px 0px #3399ff;
}
.ant-card-actions2{
  background: red !bottom;
}
</style>